<!-- 危险固废 -->

<template>
  <div class="app-container">
    <div v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px" class="search-form">

        <el-form-item label="行政区划" prop="regionId">
          <RegionSelect v-model:regionId="queryParams.regionId" style="width:200px"></RegionSelect>
        </el-form-item>

        <el-form-item label="统计年份" prop="used">
          <el-date-picker v-model="queryParams.time" value-format="YYYY" type="year" placeholder="日期"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
          <el-button icon="refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="download" :loading="exportLoading" @click="handleExport" v-hasPermi="['base:template:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="fetchList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="regionList" border>
      <el-table-column align="center" label="序号" type="index" :index="(index) => { return (index+1+(queryParams.pageNum-1)*queryParams.pageSize) }" />
      <el-table-column align="center" label="年份" prop="name" />
      <el-table-column align="center" label="行政区划名称" prop="name" />
      <el-table-column align="center" label="加和方式" prop="name" />
      <el-table-column align="center" label="工业企业数（个）" prop="name" />
      <el-table-column align="center" label="工业总产值（当年价格 单位亿元）" prop="name" />
      <el-table-column align="center" label="取水量（万吨）" prop="name" />
      <el-table-column align="center" label="煤炭消费量（万吨）" prop="name" />
      <el-table-column align="center" label="其中:燃料煤消费量（万吨）" prop="name" />
      <el-table-column align="center" label="其中:燃料煤平均含硫量(%)" prop="name" />
      <el-table-column align="center" label="其中:燃料煤平均灰分(%)" prop="name" />
      <el-table-column align="center" label="其中：燃料煤平均干燥无灰基挥发分(%)" prop="name" />
      <el-table-column align="center" label="燃料油消费量(不含车船用)（万吨）" prop="name" />
      <el-table-column align="center" label="燃料油平均含硫量(%)" prop="name" />
      <el-table-column align="center" label="焦炭消费量（万吨）" prop="name" />
      <el-table-column align="center" label="焦炭平均含硫量(%)" prop="name" />
      <el-table-column label="导入时间" align="center" prop="updateTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup  name="garbagePlant">
import RegionSelect from "@/components/RegionSelect/index"; //行政区划组件
import { getDictTitle, isBlank } from "@/utils/biz";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();

const userStore = useUserStore();

const loading = ref(false); // 遮罩层
const exportLoading = ref(false); // 导出遮罩层
const showSearch = ref(true); // 显示搜索条件
const regionList = ref([]); // 行政地区表格数据

const queryParams = ref({});

function fetchList() {}

function handleQuery() {
  fetchList();
}

function resetQuery() {
  /** 重置按钮操作 */
  proxy.resetForm("queryForm");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd(row) {}

//     // 导出操作
function handleExport() {
  proxy.$modal
    .confirm("是否确认导出所有数据项?", "警告", {
      type: "warning",
    })
    .then(() => {
      const queryParams = Object.assign({}, queryParams.value, {
        pageNum: 1,
        pageSize: 10000,
      });
      exportLoading.value = true;
      //   return exportRegion(queryParams.value);
    })
    .then((res) => {
      $download(res.data);
    })
    .catch(() => {
      // 取消操作
    })
    .finally(() => {
      exportLoading.value = false;
    });
}
</script>
<style scoped="scoped" lang="scss">
</style>
